<template>
    <div class="shopcart">
        <transition name="shopcart">
            <div class="content" v-show="show">
                <div class="header">
                    <span class="title">购物车</span><span class="empty" @click="emptyCart">清空</span>
                </div>
                <ul class="list-content">
                    <li v-for="(drug,index) in drugs" :key="index" class="item">
                        <div class="icon"><img :src="drug.url" width="70" height="70"></div>
                        <div class="item-content">
                            <div class="name" :title="drug.name">{{drug.name}}</div>
                            <div class="controll-wrapper">
                                <cartcontrol :drug="drug"></cartcontrol>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="footer">
                    <div class="price">￥{{totalPrice}}</div>
                    <div class="pay" @click="pay">支付</div>
                </div>
            </div>
        </transition>

        <div class="switch"
             :class="{'active':show}"
             @click="toggleCart"
             ref="switch"
        ><i class="el-icon-shopping-cart-2"></i></div>

        <div class="ball-container">
            <div v-for="(ball,index) in balls" :key="index">
                <transition name="drop"
                            @before-enter="dropBeforeEnter"
                            @enter="dropEnter"
                            @after-enter="dropAfterEnter">
                    <div v-show="ball.show" class="ball">
                        <div class="inner inner-hook">+</div>
                    </div>
                </transition>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import cartcontrol from "@/components/cartcontrol/cartcontrol";

    export default {
        components: {cartcontrol},
        data() {
            return {
                balls: [],
                ballIndex: 0,
                dropBalls: [],
                show: false
            }
        },
        created() {
            for (let i = 0; i < 20; i++) {
                let ball = {show: false};
                this.balls.push(ball);
            }
        },
        props: {
            drugs: {
                type: Array
            }
        },
        computed: {
            totalPrice() {
                let price = 0;
                this.drugs.forEach((drug) => {
                    price += drug.count * drug.price;
                });
                return parseFloat(price.toPrecision(12));
            }
        },
        methods: {
            toggleCart() {
                this.show = !this.show;
            },
            emptyCart() {
                this.$emit('emptyCart');
            },
            pay() {
                alert("您需支付：" + this.totalPrice + "元");
            },
            drop(el) {
                let ball = this.balls[this.ballIndex];
                ball.el = el;
                ball.show = true;
            },
            dropBeforeEnter(el) {
                let ball = this.balls[this.ballIndex++];
                if (this.ballIndex === this.balls.length) {
                    this.ballIndex = 0;
                }
                this.dropBalls.push(ball);
                let rect = ball.el.getBoundingClientRect();
                let x = rect.x + 10;
                let y = rect.y + 10;
                el.style.display = '';
                el.style.webkitTransform = `translate3d(0,${y}px,0)`;
                el.style.transform = `translate3d(0,${y}px,0)`;
                let inner = el.getElementsByClassName('inner-hook')[0];
                inner.style.webkitTransform = `translate3d(${x}px,0,0) rotate(0deg)`;
                inner.style.transform = `translate3d(${x}px,0,0) rotate(0deg)`;
            },
            dropEnter(el) {
                // eslint-disable-next-line no-unused-vars
                let rf = el.offsetHeight;
                let rect = this.$refs.switch.getBoundingClientRect();
                rect.x += 15;
                rect.y += 15;
                this.$nextTick(() => {
                    el.style.webkitTransform = `translate3d(0,${rect.y}px,0)`;
                    el.style.transform = `translate3d(0,${rect.y}px,0)`;
                    let inner = el.getElementsByClassName('inner-hook')[0];
                    inner.style.webkitTransform = `translate3d(${rect.x}px,0,0) rotate(180deg)`;
                    inner.style.transform = `translate3d(${rect.x}px,0,0) rotate(180deg)`;
                });
            },
            dropAfterEnter(el) {
                let ball = this.dropBalls.shift();
                ball.show = false;
                el.style.display = 'none';
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .shopcart {
        position fixed
        display flex
        top 0
        left 0
        height 100%
        z-index 9999
        cursor pointer

        .switch {
            position relative
            top 30%
            width 50px
            height 50px
            line-height 50px
            font-size 35px
            text-align center
            border-radius 50%
            background darkgoldenrod
            color white
            box-shadow 0 0 50px #b8860b

            &:hover {
                box-shadow 0 0 50px #e08600
                background #e08600
            }

            &.active {
                box-shadow 0 0 50px #e08600
                background #e08600
            }
        }

        .content {
            position relative
            height 100%
            width 300px
            border-right 3px solid darkgrey
            background white

            &.shopcart-enter-active, &.shopcart-leave-active {
                transition all 0.3s
                width 300px
                opacity 1
            }

            &.shopcart-enter, &.shopcart-leave-to {
                width 0
                opacity 0
            }

            .header {
                width 100%
                height 8%
                line-height 30px
                padding-top 30px
                font-size 14px
                border-bottom 1px solid darkgray

                .title {
                    position absolute
                    left 20px
                    font-size 20px
                }

                .empty {
                    position absolute
                    right 20px
                    color rgb(0, 160, 220)
                    padding 0 10px
                }
            }

            .list-content {
                height 75%
                overflow auto

                &::-webkit-scrollbar {
                    width 10px
                    background-color white;
                }

                &::-webkit-scrollbar-track {
                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                    border-radius: 10px;
                    background-color: #F5F5F5;
                }

                &::-webkit-scrollbar-thumb {
                    border-radius: 10px;
                    background-color: rgb(0, 160, 220)
                }

                .item {
                    padding 10px
                    font-size 12px
                    box-shadow 0 0 10px darkgrey

                    &:hover {
                        box-shadow 0 0 30px darkgrey
                    }

                    .icon {
                        display inline-block
                        vertical-align top
                        height 70px
                        width 70px
                    }

                    .item-content {
                        display inline-block
                        width 200px
                        height 70px
                        margin-top 10px

                        .name {
                            height 20px
                        }

                        .controll-wrapper {
                            height 20px
                        }
                    }
                }
            }
        }

        .footer {
            position absolute
            bottom 0
            width 100%
            height 60px

            .price {
                display inline-block
                width 50%
                height 60px
                line-height 60px
                text-align center
                background #e08600
            }

            .pay {
                display inline-block
                width 50%
                height 60px
                text-align center
                line-height 60px
                background darkolivegreen
            }
        }

        .ball-container {
            .ball {
                position fixed
                top 0
                left 0
                z-index 200
                transition all 1.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
            }

            .inner {
                width 20px
                color #fff
                font-size 20px
                height 20px
                line-height 20px
                text-align center
                border-radius 50%
                background rgb(0, 160, 220)
                transition all 1.4s linear
            }
        }
    }
</style>
